<template>
  <div class="portal-require require-container">
    <div class="require-banner"></div>
    <div class="require-content">
      <div class="require-wrapper">
        <div class="breadcrumb">
          <Zbreadcrumb textType="white" :breadName="breadName"></Zbreadcrumb>
        </div>
        <div class="title-card">
          <a-card style="width: 100%; padding: 10px 20px">
            <a-row>
              <a-col>
                <div class="card-title" style="height: 60px">
                  <!-- <img src="@/assets/images/require/require-block.png" alt="" /> -->
                  <span style="margin-left: 0; font-size: 28px; color: #333333">{{ model.title }} </span>
                </div>
                <div class="tags">
                  <a-tag color="orange" v-for="(item, index) in model.keyword" :key="index"> {{ item }} </a-tag>
                </div>
              </a-col>
              <a-col>
                <a-tabs>
                  <a-tab-pane key="1" tab="基础信息">
                    <a-descriptions :column="3">
                      <a-descriptions-item>
                        <span slot="label">【专利类型】</span>
                        <span>{{ model.patentType }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【法律状态】</span>
                        <span>{{ model.validate }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【申请号】</span>
                        <span>{{ model.applicationDocNum }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【申请日期】</span>
                        <span>{{ model.applicationDate }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【公开号】</span>
                        <span>{{ model.publicationDocNum }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【公开日期】</span>
                        <span>{{ model.publicationDate }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【第一发明人】</span>
                        <span>{{ model.firstInventor }}</span>
                      </a-descriptions-item>

                      <a-descriptions-item>
                        <span slot="label">【主分类号】</span>
                        <span>{{ model.ipcMain }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item>
                        <span slot="label">【发明人】</span>
                        <span>{{ model.inventor }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【分类号】</span>
                        <span>{{ model.ipcList }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【申请人】</span>
                        <span>{{ model.applicant }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【第一申请人】</span>
                        <span>{{ model.firstInventor }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【申请人地址】</span>
                        <span>{{ model.applicantAdder }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【优先权号】</span>
                        <span>{{ model.priorityDocNum }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【专利权人】</span>
                        <span>{{ model.assignee }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【当前专利权人】</span>
                        <span>{{ model.currentAssignee }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【代理机构】</span>
                        <span>{{ model.agentName }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3">
                        <span slot="label">【代理人】</span>
                        <span>{{ model.agentPersonName }}</span>
                      </a-descriptions-item>
                      <a-descriptions-item :span="3" class="custom-descriptions-item-long">
                        <div slot="label">【摘要】</div>

                        <div style="width: 1000px; overflow-wrap: break-word">
                          <span>{{ model.abstractDesc }}</span>
                        </div>
                      </a-descriptions-item>
                    </a-descriptions>
                  </a-tab-pane>
                  <a-tab-pane key="2" tab="权利要求">
                    <div
                      style="white-space: pre-line; font-size: 16px; color: rgba(0, 0, 0, 0.85) !important"
                      v-html="model.claims"
                    ></div>
                  </a-tab-pane>
                  <a-tab-pane key="3" tab="说明书">
                    <div
                      style="white-space: pre-line; font-size: 16px; color: rgba(0, 0, 0, 0.85) !important"
                      v-html="model.description"
                    ></div>
                  </a-tab-pane>
                </a-tabs>
              </a-col>
            </a-row>
          </a-card>
        </div>
      </div>
    </div>
  </div>
</template>
    
<script>
import { mapGetters } from 'vuex'
import { deleteAction, getAction, downFile, getFileAccessHttpUrl, postAction, httpAction } from '@/api/manage'
import moment from 'moment'
export default {
  data() {
    return {
      model: {},
      tagInputVisible: false,
      tagInputValue: '',
      activeKeys: '1',
      pagination: {
        current: 1,
        total: 10,
        pageSize: 3,
      },
      breadName: '',
      commentContent: '',
      teams: [],
      teamSpinning: true,
      url: {
        detail: '/report4/patent-details',
        query: '/comment/jnDemandComment/list',
        add: '/comment/jnDemandComment/add',
      },
      commentlist: [],
      moment,
      detailList: [
        {
          title: '技术领域',
          description:
            '本技术围绕食品危害物低成本、快速发现为核心，将生物识别与结合新型纳米标记材料相结合， 针对目前生物快速检测中存在的稳定性和可靠性问题，利用自组装技术将多种光、电、磁学信号集于一体，构建具有良好体系相容性和稳定性的纳米-生物传感界面，提出了基于等离子手性信号的高灵敏检测新技术， 发展了集快速富集与多信号同时测定于一体的多功能传感检测新方法和新器件。',
        },
        {
          title: '背景技术',
          description:
            '(1)综合运用了化学和生物体系的多尺度模拟和计算，提出了基于粗粒化模型的抗原抗体亲和性定量分析新方法，设计并研制了200余种高亲和性和高特异性抗原和抗体。(2）研究了抗体与载体成分(纤维素、磁性纳米材料、硅球等) 的表界面性质，创制了基于相分离的新型分离富集介质，并研制了相关快速富集和分离产品，大大提高了复杂基质中痕量成分的提取效率。(3)研制了新型标记材料，解决了“高标记效率”和“生物分子高活性”无法兼顾的难题，研制了系列高特异性检测探针，为复杂体系中痕量物质的快速甄别提供了有力手段。',
        },
        {
          title: '发明内容',
          description:
            '(1)综合运用了化学和生物体系的多尺度模拟和计算，提出了基于粗粒化模型的抗原抗体亲和性定量分析新方法，设计并研制了200余种高亲和性和高特异性抗原和抗体。(2）研究了抗体与载体成分(纤维素、磁性纳米材料、硅球等) 的表界面性质，创制了基于相分离的新型分离富集介质，并研制了相关快速富集和分离产品，大大提高了复杂基质中痕量成分的提取效率。(3)研制了新型标记材料，解决了“高标记效率”和“生物分子高活性”无法兼顾的难题，研制了系列高特异性检测探针，为复杂体系中痕量物质的快速甄别提供了有力手段。',
        },
        {
          title: '附图说明',
          description:
            '(1)综合运用了化学和生物体系的多尺度模拟和计算，提出了基于粗粒化模型的抗原抗体亲和性定量分析新方法，设计并研制了200余种高亲和性和高特异性抗原和抗体。(2）研究了抗体与载体成分(纤维素、磁性纳米材料、硅球等) 的表界面性质，创制了基于相分离的新型分离富集介质，并研制了相关快速富集和分离产品，大大提高了复杂基质中痕量成分的提取效率。(3)研制了新型标记材料，解决了“高标记效率”和“生物分子高活性”无法兼顾的难题，研制了系列高特异性检测探针，为复杂体系中痕量物质的快速甄别提供了有力手段。',
        },
        {
          title: '具体实施方式',
          description:
            '(1)综合运用了化学和生物体系的多尺度模拟和计算，提出了基于粗粒化模型的抗原抗体亲和性定量分析新方法，设计并研制了200余种高亲和性和高特异性抗原和抗体。(2）研究了抗体与载体成分(纤维素、磁性纳米材料、硅球等) 的表界面性质，创制了基于相分离的新型分离富集介质，并研制了相关快速富集和分离产品，大大提高了复杂基质中痕量成分的提取效率。(3)研制了新型标记材料，解决了“高标记效率”和“生物分子高活性”无法兼顾的难题，研制了系列高特异性检测探针，为复杂体系中痕量物质的快速甄别提供了有力手段。',
        },
      ],
      relatedList: [],
      noTitleKey: 'app',
    }
  },
  mounted() {
    let id = this.$route.query.id
    this.breadName = this.$route.path
    this.getDetail(id)
  },
  created() {},
  methods: {
    ...mapGetters(['nickname', 'avatar']),
    handleClick(e) {
      this.activeKeys = e.key
    },
    getAvatar() {
      return getFileAccessHttpUrl(this.avatar())
    },
    getDetail(id) {
      getAction(this.url.detail + '/' + id)
        .then((e) => {
          console.log(e)

          const { code, result, message } = e
          if (code == 200) {
            this.model = {
              ...result,
            }
          } else {
            this.$message.error(message)
          }
        })
        .finally(() => {})
    },

    handleTabChange(key, type) {
      this[type] = key
    },

    handleTagClose(removeTag) {
      const tags = this.tags.filter((tag) => tag != removeTag)
      this.tags = tags
    },

    showTagInput() {
      this.tagInputVisible = true
      this.$nextTick(() => {
        this.$refs.tagInput.focus()
      })
    },

    handleInputChange(e) {
      this.tagInputValue = e.target.value
    },

    handleTagInputConfirm() {
      const inputValue = this.tagInputValue
      let tags = this.tags
      if (inputValue && tags.indexOf(inputValue) === -1) {
        tags = [...tags, inputValue]
      }

      Object.assign(this, {
        tags,
        tagInputVisible: false,
        tagInputValue: '',
      })
    },
  },
}
</script>
    
<style lang="less" scoped>
.require-content {
  margin-bottom: 60px;

  .require-wrapper {
    width: 1244px;
    margin: 0 auto;
    border-radius: 10px;
    overflow: hidden;

    ::v-deep .title-card {
      .title-info {
        .title {
          font-size: 28px;
        }

        .money {
          color: #f7af36;
          font-size: 24px;
          font-weight: bold;
        }
      }

      .tags {
        margin-bottom: 30px;
      }

      .divider {
        display: flex;
        margin: 40px 0;
        align-items: center;
        /* 垂直居中 */
        height: 36px;

        span {
          width: 120px;
          margin-left: 10px;
          display: inline-block;
          color: #38445e;
          font-size: 20px;
          font-weight: bold;
        }

        .divider-line {
          border: 1px solid #bbbbbb;
          border-style: dashed;
          width: 100%;
        }
      }

      .step-wrapper {
      }

      .card-title {
        height: 30px;

        display: flex;

        align-items: center;

        /* 垂直居中 */
        span {
          margin-left: 8px;
          font-size: 20px;
          font-weight: bold;
        }

        .icon {
          margin-left: 0px;
          background-color: #1273dd;
          width: 6px;
          border-radius: 6px;
          height: 18px;
        }
      }

      .ant-descriptions-item {
      }

      .ant-descriptions-item-label {
        margin-right: 8px;
        vertical-align: top;
      }

      .ant-descriptions-item-colon::after {
        content: none !important;
      }
    }

    .comment-submit {
      margin-top: 10px;
      text-align: right;
    }
  }
}

.custom-descriptions-item-long {
  display: flex;
  align-items: flex-start;
}
</style>